<template>
    <div class="contact-aside">
        <el-tabs type="border-card" class="demo-tabs" @tab-click="tabClickHandle" v-model="activePane">
            <el-tab-pane name="organizationPane">
                <template #label>
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <el-icon><calendar /></el-icon>
                        </el-col>
                        <el-col :span="12">
                            所有记录
                        </el-col>
                    </el-row>
                </template>
                <organization-pane @search-node="searchNode"/>
            </el-tab-pane>
            <el-tab-pane name="userGroupPane" :lazy="true">
                <template #label>
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <el-icon><coin /></el-icon>
                        </el-col>
                        <el-col :span="12">
                            我的分组
                        </el-col>
                    </el-row>
                </template>
                <packet-pane @search-group="searchGroup"/>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import OrganizationPane from "./sideComps/OrganizationPane.vue";
import PacketPane from "./sideComps/PacketPane.vue";
import {getUserContactsGroupData} from "../../../../network/sys/contacts";
export default {
    name: "ContactAside",
    components: {PacketPane, OrganizationPane},
    emits: ['search-node','tab-change','search-group'],
    data(){
        return{
            activePane: 'organizationPane'
        }
    },
    methods:{
        searchNode(node){
            this.$emit('search-node',node);
        },
        searchGroup(group){
            this.$emit('search-group',group);
        },
        tabClickHandle(paneContext){
            // console.log('paneContext',paneContext)
            this.$emit('tab-change',paneContext.index);
        }
    }
}
</script>

<style scoped>
*{
    /*border: 1px solid red;*/
}
.contact-aside{
    width: 100%;
    height: 100%;
}
.el-tabs--border-card {
    height: 99%;
}
</style>
<style>
.el-tabs--border-card>.el-tabs__content{
    padding: 6px;
}
</style>